<script setup lang="ts">
import Model from './Model.vue';
</script>

<template>
<!--  :gutter 表示列之间的间距-->
  <el-row class="top" :gutter="20">
<!--    :span 表示宽度-->
    <el-col :span="6">
      <Model></Model>
    </el-col>
    <el-col :span="6">
      <Model>
        <template v-slot:title>访问量</template>
        <template v-slot:num1>20000</template>
        <template v-slot:icon><img src="../assets/bing.svg" style="width: 30px"></template>
        <template v-slot:total>总访问量</template>
        <template v-slot:num2>500000</template>
      </Model>
    </el-col>
    <el-col :span="6">
      <Model>
        <template v-slot:title>下载量</template>
        <template v-slot:num1>8000</template>
        <template v-slot:icon><img src="../assets/xiazai.svg" style="width: 30px"></template>
        <template v-slot:total>总下载量</template>
        <template v-slot:num2>120000</template>
      </Model>
    </el-col>
    <el-col :span="6">
      <Model>
        <template v-slot:title>使用量</template>
        <template v-slot:num1>5000</template>
        <template v-slot:icon><img src="../assets/shizhong.svg" style="width: 30px"></template>
        <template v-slot:total>总使用量</template>
        <template v-slot:num2>50000</template>
      </Model>
    </el-col>
  </el-row>
</template>

<style scoped>
.top {
  margin-top: 15px;
}
</style>